import React, { useState, useEffect } from "react";
import { useNavigate, useSearchParams, useParams } from "react-router-dom";
import { NavBar, Collapse, Tag, List } from "antd-mobile";
import { AntOutline } from "antd-mobile-icons";
import NavDate from "../../components/NavDate";
import http from "../../api/http";
import dayjs from "dayjs";
import styles from "./deatil.module.css";

function Index() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [sp, setSp] = useSearchParams();
  const start = sp.get("start");
  const end = sp.get("end");
  const date = sp.get("date");
  const [infor, setInfor] = useState({});
  const SeatType = ["ssoftSeat", "fsoftSeat", "businessSeat"];
  const SeatTypeCN = ["二等座", "一等座", "商务座"];

  const dayLeft = dayjs(sp.get("date")).format("M月D日 ddd");
  const dayright = dayjs(sp.get("date")).add(1, "day").format("M月D日 ddd");

  //获取详情数据
  const FeachGetInfor = async () => {
    const res = await http.get(`/xx/trip/train/${id}`, {
      params: { start, end },
    });
    setInfor(res.data.data);
  };

  useEffect(() => {
    FeachGetInfor();
  }, []);

  const handelBack = () => {
    navigate(-1);
  };

  //携带参数跳转到订单页
  const handelToOrder = (seatType, price) => {
    navigate(`/order?seatType=${seatType}&price=${price}&date=${date}`, {
      state: infor,
    });
  };

  if (!infor.id) {
    return <div>暂无数据</div>;
  }

  return (
    <div>
      <NavBar onBack={() => handelBack()}>车次详情</NavBar>
      <NavDate date={date} />
      <div className={styles.inforWrap}>
        <span>{infor.startStation}</span>
        <span>{infor.trainNo}</span>
        <span>{infor.endStation}</span>

        <span>{infor.startTime}</span>
        <span>
          <AntOutline fontSize={36} color="skyblue" />
        </span>
        <span>{infor.endTime}</span>

        <span>{dayLeft}</span>
        <span>耗时 {infor.timeTaken}</span>
        <span>{infor.isNextDay ? dayright : dayLeft}</span>
      </div>
      <div>
        <Collapse
          accordion
          arrowIcon={(active) =>
            active ? (
              <Tag color="#ff6430" fill="outline">
                收起
              </Tag>
            ) : (
              <Tag color="#ff6430" fill="outline">
                预定
              </Tag>
            )
          }
        >
          {SeatType.map((item, index) => (
            <Collapse.Panel
              key={index}
              title={
                <div>
                  <span>
                    <span>{SeatTypeCN[index]}</span>
                    <span>¥{infor[item].price}</span>
                  </span>
                  <span>
                    {infor[item].ticketNum}
                    {typeof infor[item].ticketNum === "number" ? "张" : ""}
                  </span>
                </div>
              }
            >
              <List>
                <List.Item
                  arrowIcon={
                    <Tag
                      color="orange"
                      fill="outline"
                      onClick={() =>
                        handelToOrder(SeatTypeCN[index], infor[item].price)
                      }
                    >
                      买票
                    </Tag>
                  }
                  description={<span>含40元出行保障 快速出票 迅捷无忧</span>}
                >
                  快速预订
                </List.Item>
                <List.Item
                  arrowIcon={
                    <Tag color="orange" fill="outline">
                      买票
                    </Tag>
                  }
                  description={<span>出票较慢，高峰期需要排队</span>}
                >
                  普通预订
                </List.Item>
              </List>
            </Collapse.Panel>
          ))}
        </Collapse>
      </div>
    </div>
  );
}

export default Index;
